import moment from 'moment';
import {View, Text} from '@tarojs/components';
import {AtIcon} from "taro-ui";
import './index.scss';

export default function OrderCard({
                                    order,
                                    isFleetOrder = false,
                                    fleetName = ''
                                  }) {
  const {
    stationName = '',
    createTime = '',
    // endTime = '',
    orderNum = '',
    pileNum = '',
    carLicenseNumber = '',
    carVin = '',
    gunNum = '',
    electricChargeAmout = '',
    serviceChargeAmount = '',
    actuallyAmount = '',
    totalAmount = '',
    chargingDuration = 0,
    chargingCapacity = '',
    beginSoc = undefined, //开始SOC
    endSoc = undefined, //结束SOC
    beforeBalance = '',
    afterBalance = ''
  } = order;
  const endTime = moment(createTime).add(chargingDuration, 'minutes').format('YYYY-MM-DD HH:mm');
  return (
    <View className='cardWrap'>
      <View className='cardTitle'>
        <View>
          <AtIcon prefixClass='icon' value={isFleetOrder ? 'chedui' : 'weixin'} size={18}
                  color={isFleetOrder ? '#048fff' : '#28c445'}/>
          &nbsp;{isFleetOrder ? fleetName : stationName}
        </View>
        {/*<View><View className='btn' onClick={() => Taro.showToast({title: '续充功能暂未实现', icon: "none"})}>续充</View></View>*/}
      </View>
      <View className='textLine'>
        <View><Text className='label'>创建时间:</Text> {createTime && moment(createTime).format('YYYY-MM-DD HH:mm')}
        </View>
        <View><Text className='label'>订单号:</Text> {orderNum}</View>
      </View>
      <View className='textLine'>
        <View><Text className='label'>充电量:</Text> {chargingCapacity}度</View>
        <View><Text className='label'>充电时长:</Text> {chargingDuration}分钟</View>
      </View>
      <View className='textLine'>
        <View><Text className='label'>开始Soc:</Text> {beginSoc || 0}%</View>
        <View><Text className='label'>结束Soc:</Text> {endSoc || 0}%</View>
      </View>
      <View className='textLine'>
        <View><Text className='label'>电费:</Text> {electricChargeAmout}元</View>
        <View><Text className='label'>服务费:</Text> {serviceChargeAmount}元</View>
      </View>
      <View className='textLine'>
        <View><Text className='label'>订单金额:</Text> {totalAmount}元</View>
        <View><Text className='label'>实付金额:</Text> {actuallyAmount || totalAmount}元</View>
      </View>
      {
        isFleetOrder ? <View className='textLine'>
          <View><Text className='label'>结算前金额:</Text> {beforeBalance}元</View>
          <View><Text className='label'>结算后金额:</Text> {afterBalance}元</View>
        </View> : <View className='textLine'>
          <View><Text className='label'>桩编号:</Text> {pileNum}</View>
          <View><Text className='label'>枪号:</Text> {gunNum}</View>
        </View>
      }
      <View className='textLine'>
        <View><Text className='label'>车牌号:</Text> {carLicenseNumber}</View>
        {isFleetOrder ?  <View><Text className='label'>车架号:</Text> {carVin}</View> : null}
      </View>
    </View>
  )
}
